<template>
  <div class="recommend-list">
    <RecommendCard
      v-for="item in recommends"
      :key="item.id"
      :coverUrl="item.cover || item.cover_url"
      :title="item.title"
      :authorName="item.author"
      :videoUrl="getValidVideoUrl(item.video_url_web)"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import request from '@/utils/request'
import RecommendCard from '../components/RecommendCard.vue'

const recommends = ref([])

function isLocalPath(path) {
  if (!path) return true
  // 判断是否为本地路径（C:/、file:/、\\、盘符开头等）
  return /^([a-zA-Z]:\\|[a-zA-Z]:\/|file:\/\/|\\\\|C:|D:|E:|F:)/.test(path)
}

function getValidVideoUrl(url) {
  if (!url || isLocalPath(url)) {
    return ''
  }
  return url
}

async function fetchRecommend() {
  const res = await request.get('/api/recommend/')
  recommends.value = res.results || []
}

onMounted(() => {
  fetchRecommend()
})
</script>

<style scoped>
.recommend-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
  box-sizing: border-box;
  gap: 24px;
  padding: 0;
}
</style> 